<template>
    <view class="page-box">
        <view class="header">
            <view class="currentStatus">今日课表</view>
            <view class="todayDate">{{ month }}月{{ date }}日 | {{ weekday[today] }} | 第{{ currentWeek }}周</view>
        </view>
        <!-- <view class="headerFore"></view> -->
        <view class="content">
            <!-- 上午 -->
            <view class="section">上午课程</view>
            <view class="class" v-for="(item, index) in todayCourse.morning" :key="index">
                <view class="time">
                    <view class="start">{{ item.startTime }}</view>
                    <view class="end opa">{{ item.endTime }}</view>
                </view>
                <view class="divider"></view>
                <view class="infoCan">
                    <view class="infoLesson text-cut">{{ item.name }}</view>
                    <view class="infoOther opa">{{ item.section }} | {{ item.address }} | {{ item.teacher }}</view>
                </view>
            </view>
            <block v-if="fun.show(todayCourse.morning)">
                <view class="class noclass">
                    <view class="time">
                        <view class="start">08:00</view>
                        <view class="end">12:00</view>
                    </view>
                    <view class="divider"></view>
                    <view class="infoCan">
                        <view class="infoLesson">空 闲</view>
                        <view class="infoOther">第{{ sections[0] }}节 - 第{{ sections[sectionIndex[0]] }}节</view>
                    </view>
                </view>
            </block>
            <!-- 下午 -->
            <view class="section">下午课程</view>
            <view class="class" v-for="(item, index) in todayCourse.afternoon" :key="index">
                <view class="time">
                    <view class="start">{{ item.startTime }}</view>
                    <view class="end opa">{{ item.endTime }}</view>
                </view>
                <view class="divider"></view>
                <view class="infoCan">
                    <view class="infoLesson">{{ item.name }}</view>
                    <view class="infoOther opa">{{ item.section }} | {{ item.address }} | {{ item.teacher }}</view>
                </view>
            </view>
            <block v-if="fun.show(todayCourse.afternoon)">
                <view class="class noclass">
                    <view class="time">
                        <view class="start">14:30</view>
                        <view class="end">17:40</view>
                    </view>
                    <view class="divider"></view>
                    <view class="infoCan">
                        <view class="infoLesson">空 闲</view>
                        <view class="infoOther">第{{ sections[sectionIndex[0] + 1] }}节 - 第{{ sections[sectionIndex[0] + sectionIndex[1] + 1] }}节</view>
                    </view>
                </view>
            </block>
            <!-- 晚上 -->
            <view class="section">晚上课程</view>
            <view class="class" v-for="(item, index) in todayCourse.evening" :key="index">
                <view class="time">
                    <view class="start">{{ item.startTime }}</view>
                    <view class="end opa">{{ item.endTime }}</view>
                </view>
                <view class="divider"></view>
                <view class="infoCan">
                    <view class="infoLesson">{{ item.name }}</view>
                    <view class="infoOther opa">{{ item.section }} | {{ item.address }} | {{ item.teacher }}</view>
                </view>
            </view>
            <block v-if="fun.show(todayCourse.evening)">
                <view class="class noclass">
                    <view class="time">
                        <view class="start">19:30</view>
                        <view class="end">21:00</view>
                    </view>
                    <view class="divider"></view>
                    <view class="infoCan">
                        <view class="infoLesson">空 闲</view>
                        <view class="infoOther">
                            第{{ sections[sectionIndex[0] + sectionIndex[1] + 2] }}节 - 第{{ sections[sectionIndex[0] + sectionIndex[1] + sectionIndex[2] + 2] }}节
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script module="fun" lang="wxs">
    function show(array) {
        if(array && array.length > 0) {
            return false;
        }
        return true;
    }
    module.exports = {
        show: show
    }
</script>

<script>
export default {
    props: {
        todayCourse: {
            type: null,
            default: () => {
                return {}
            }
        },
        currentWeek: {
            type: Number,
            default: 0
        },
        sectionIndex: {
            type: Array,
            default: [4, 3, 1]
        }
    },

    data() {
        return {
            month: new Date().getMonth() + 1, // 月份
            date: new Date().getDate(), // 日期
            weekday: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], // 星期
            today: new Date().getDay(),  // 星期
            sections: '', // 节数
        };
    },

    watch: {
        todayCourse: function (e) {
            this.todayCourse = e;
        }
    },

    methods: {
        
    },

    created: function () {
        let sections = [];
            for (let i = 0; i < this.sectionIndex.reduce((x, y) => x + y) + 3; i++) {
                sections.push(i + 1);
            }
        this.sections = sections;
    }
};
</script>
<style lang="scss">
.box {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    touch-action: auto;
    line-height: 1;
    color: #333;
}

.wrapper {
    height: 100vh;
    position: relative;
}

.page-box {
    position: relative;
    overflow: hidden;
}

.header {
    height: 650rpx;
    background: url('https://cdn.cuuo.cn/images/course-home.png');
    position: relative;
    background-size: cover;
    overflow: auto;
    z-index: 1;
}

.todayDate {
    margin-top: 3vw;
    margin-left: 8vw;
    font-weight: 400;
    font-size: 3.5vw;
    color: #f1faff;
    letter-spacing: 0.9px;
}

.currentStatus {
    margin-top: 200rpx;
    margin-left: 8vw;
    font-weight: 600;
    font-size: 5vw;
    color: #fff;
}

.tips {
    position: absolute;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 10rpx;
    top: 330rpx;
    right: 18vw;
    max-width: 500rpx;
    z-index: 100;
    opacity: 0.8;

    &::after {
        content: '';
        position: absolute;
        height: 20rpx;
        width: 50rpx;
        right: -15rpx;
        top: 25rpx;
        border-radius: 0rpx 50rpx 0rpx 50rpx;
        background-color: #fff;
        z-index: -10;
        opacity: 0.8;
    }
}

.headerFore {
    position: absolute;
    width: 300rpx;
    height: 235rpx;
    top: 330rpx;
    right: -10vw;
    background: url('https://cdn.cuuo.cn/images/course-tips.gif');
    background-size: cover;
    z-index: 98;
}

.content {
    position: relative;
    overflow: auto;
    margin-top: -100rpx;
    margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
    padding: 2vw 7vw;
    box-sizing: border-box;
    background-color: #fff;
    min-height: calc(100vh -30vw);
    border-radius: 5vw 5vw 0px 0px;
    z-index: 10;
}

.section {
    margin-top: 6vw;
    margin-bottom: 3vw;
    font-size: 3vw;
    font-weight: 700;
    letter-spacing: 0;
    color: #8c93b0;
}

.class {
    margin: 20rpx 10rpx;
    height: 10vw;
    display: flex;
    align-items: center;
}

.opa {
    opacity: 0.6;
}

.noclass {
    color: #3a526f;
    opacity: 0.4;
}

.time {
    color: #000;
    width: 9vw;
    min-width: 9vw;
    display: inline-flex;
    flex-direction: column;
    margin-right: 1.5vw;
}

.start {
    padding-bottom: 10rpx;
}

.start,
.end {
    font-size: 3vw;
}

.divider {
    background-color: #2196f3;
    width: 1vw;
    min-width: 1vw;
    height: 8vw;
    border-radius: 10rpx;
    color: #0000ff8c;
}

.infoCan {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: 2vw;
    margin-right: 1vw;
}

.infoLesson,
.infoOther {
    color: #000;
    letter-spacing: 0;
    margin-bottom: 0.7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoLesson {
    font-size: 4vw;
    max-width: 590rpx;
}

.infoOther {
    font-size: 3vw;
}
</style>